<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性树示例</title>
    <style>
      ul {
        list-style-type: none;
        padding-left: 20px;
      }
      .property {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="tree-container"></div>

    <script>
      function renderTree(obj, parentElement) {
        const ul = document.createElement("ul");

        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            const li = document.createElement("li");

            const span = document.createElement("span");
            span.classList.add("property");
            span.textContent = key + ": ";
            li.appendChild(span);

            if (typeof obj[key] === "object" && obj[key] !== null) {
              // 如果是对象或数组，递归渲染
              const nestedUl = document.createElement("ul");
              renderTree(obj[key], nestedUl);
              li.appendChild(nestedUl);
            } else {
              // 如果是基本类型，直接显示值
              const valueSpan = document.createElement("span");
              valueSpan.textContent = obj[key];
              li.appendChild(valueSpan);
            }

            ul.appendChild(li);
          }
        }

        parentElement.appendChild(ul);
      }

      // 示例对象
      const obj = {
        name: "John Doe",
        age: 30,
        address: {
          street: "123 Main St",
          city: "Anytown",
          state: "CA",
        },
        hobbies: ["reading", "traveling"],
      };

      // 渲染属性树
      const container = document.getElementById("tree-container");
      renderTree(obj, container);
    </script>
  </body>
</html>
